import React from "react";
import "./App.css";

class Hello extends React.Component {
  componentDidMount(): void {
    console.log("Hello 挂载完成");
    this.timer = setInterval(() => {
      console.log("1111");
    }, 1000);
  }

  componentWillUnmount(): void {
    console.log("Hello 将要销毁");

    clearInterval(this.timer);
  }

  render(): React.ReactNode {
    return <h4>Hello</h4>;
  }
}

class App extends React.Component {
  state = {
    isShow: true,
  };

  toggle() {
    this.setState((state) => ({ isShow: !state.isShow }));
  }

  render() {
    return (
      <div>
        <h1>App</h1>

        <button onClick={() => this.toggle()}>Toggle</button>

        <hr />

        {this.state.isShow && <Hello />}
      </div>
    );
  }
}

export default App;
